<template>
	<view class="my">
		<!-- 个人信息 -->
		<view class="user-info">
			<u-cell-group customStyle="background-color: #1296db">
				<!-- 已登录 -->
				<u-cell :isLink="true" clickable="false" @click="goPersonal" v-if="jwtToken">
					<!-- 头像 -->
					<view slot="title" class="avatar">
						<img src="https://img.yzcdn.cn/vant/cat.jpeg"></img>
						<!-- 信息 -->
						<view class="inform">
							<text class="username">{{userInfo.username}}</text>
							<text class="phoneNumber">手机号：{{userInfo.phoneNumber ? userInfo.phoneNumber : '未绑定'}}</text>
						</view>
					</view>
				</u-cell>
				<!-- 未登录 -->
				<u-cell :isLink="true" clickable="false" @click="goLogin" v-else>
					<!-- 头像 -->
					<view slot="title" class="avatar">
						<img src="https://img.yzcdn.cn/vant/cat.jpeg"></img>
						<!-- 信息 -->
						<view class="inform">
							未登录
						</view>
					</view>
				</u-cell>
			</u-cell-group>

		</view>

		<!--uni-app-->
		<tui-card>
			<template v-slot:body>
				<!-- 余额 -->
				<u-cell-group customStyle="background-color: #fff">
					<u-cell icon="setting-fill" title="安全中心" :isLink="true"></u-cell>
					<u-row customStyle="height: 100px">
						<u-col span="6" textAlign="center">
							<span class="balance-text">{{userInfo.credit ? userInfo.credit : '0'}}</span>
							<view class="balance">余额</view>
						</u-col>
						<u-col span="6" textAlign="center">
							<span class="region-text">{{userInfo.city ? userInfo.city : '未知'}}</span>
							<view class="region">地区</view>
						</u-col>
					</u-row>
				</u-cell-group>
			</template>
		</tui-card>
		<!-- 手分琴 -->
		<tui-card>
			<template v-slot:body>
				<u-collapse accordion :value="name1">
					<u-collapse-item title="财务管理" :name="1">
						<u-cell icon="setting-fill" title="账单列表" :isLink="true" :border="false"></u-cell>
						<u-cell icon="setting-fill" title="账户充值" :isLink="true" :border="false"></u-cell>
						<u-cell icon="setting-fill" title="交易记录" :isLink="true" :border="false"></u-cell>
					</u-collapse-item>
					<u-collapse-item title="技术支持" :name="2">
						<u-cell icon="integral-fill" title="工单列表" :isLink="true" :border="false"></u-cell>
						<u-cell icon="integral-fill" title="工单详情" :isLink="true" :border="false"></u-cell>
						<u-cell icon="integral-fill" title="提交工单" :isLink="true" :border="false"></u-cell>
						<u-cell icon="integral-fill" title="回复工单" :isLink="true" :border="false"></u-cell>
					</u-collapse-item>
					<u-collapse-item title="推介计划" :name="3">
						<u-cell icon="integral-fill" title="分享推广链接" :isLink="true" :border="false"></u-cell>
					</u-collapse-item>
					<u-collapse-item title="消息中心" :name="4">
						<u-cell icon="integral-fill" title="消息中心" :isLink="true" :border="false"></u-cell>
					</u-collapse-item>
				</u-collapse>
			</template>
		</tui-card>
	</view>
</template>

<script>
	import tuiCard from "@/components/thorui/tui-card/tui-card"
	import {
		mapState
	} from 'vuex'

	export default {
		components: {
			tuiCard
		},
		data() {
			return {
				userInfo: {}, // 个人信息
				name1: 1
			}
		},
		computed: {
			...mapState('loginModules', ['jwtToken'])
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			// 去登录页面
			goLogin() {
				uni.navigateTo({
					url: '/subpages/login/login'
				})
			},
			// 去个人中心
			goPersonal() {
				uni.navigateTo({
					url: '/subpages/personal/personal'
				})
			},
			// 获取用户资料
			async getUserInfo() {
				if (this.jwtToken) {
					const {
						data: res
					} = await uni.$http.get('/v1/user')
					if (res.status !== 200) return uni.$showMsg()
					this.userInfo = res.data.client
					console.log(res);
					let phoneNumber = this.userInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
					this.userInfo.phoneNumber = phoneNumber
				}
			}
		}
	}
</script>

<style lang="scss">
	.my {
		min-height: 100vh;
		background-color: #f5f5f5;
		box-sizing: border-box;
	}

	.user-info {
		.u-cell {
			background-color: #1296db !important
		}
	}



	.avatar {
		display: flex;
		color: #fff;
		box-sizing: border-box;

		img {
			width: 150rpx;
			height: 130rpx;
			border-radius: 8%;
			border: 2px solid rgba(255, 250, 232, 0.5);
		}
	}

	/deep/.u-icon__icon {
		color: #fff !important;
	}

	/deep/.tui-card-header {
		padding: unset !important;
	}

	.inform {
		margin-left: 35rpx;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		flex-direction: column;
	}

	.inform .username {
		font-size: 40rpx;
		font-weight: 500;
	}



	.tui-card {
		margin: 30rpx 30rpx !important;
		border-radius: 20rpx !important;

		.u-icon__icon {
			color: #3578e9 !important;
		}
	}

	.balance-text,
	.region-text {
		font-size: 30rpx;
		color: #808080;
	}



	.u-page {
		padding: 0;

		&__item {

			&__title {
				color: $u-tips-color;
				background-color: $u-bg-color;
				padding: 15px;
				font-size: 15px;

				&__slot-title {
					color: $u-primary;
					font-size: 14px;
				}
			}
		}
	}

	.u-collapse-content {
		color: $u-tips-color;
		font-size: 14px;
	}


	.u-collapse-item__content {
		background-color: #fffae8;

		.u-collapse-item__content__text {
			padding: unset !important;
		}
	}
</style>
